<template>
	<div class="red-package scrollable">
		<img class="red-package__bg" src="@/assets/2/images/red-package/bg.png" />

		<div class="red-package__header">
			<div class="label">
				<p @click="openRules">我的金币<i class="iconfont icon-bangzhu"></i></p>
			</div>

			<div class="gold">
				<p @click="openGoldRecord('record')">
					<span class="gold-num">{{ bwbt_userInfo.gold || 0 }}</span>
					<span class="gold-record">明细</span>
				</p>
			</div>

			<ul>
				<li @click="toGiftList">
					<img src="@/assets/2/images/red-package/gift-btn.png" alt="" />
					<p>兑礼品</p>
				</li>

				<li @click="openGoldRecord('exchange')" id="step-1">
					<img src="@/assets/2/images/red-package/money-btn.png" alt="" />
					<p>兑现金</p>
				</li>
			</ul>
		</div>

		<div class="red-package__container">
			<!-- 奖池 -->
			<div class="pool">
				<template v-if="activity.info">
					<img class="pool__top-border" src="@/assets/2/images/red-package/pool-top-border.png" />

					<!-- 本期信息 -->
					<div class="pool__header">
						<p class="pool__label" v-if="activity.status">本期<br />奖池</p>
						<p class="pool__label" v-else>下期<br />预告</p>

						<div class="pool__det">
							<p>{{ activity.info.virtualPrize }}</p>
							<p>
								{{ (activity.info.startTime * 1000) | format_date('MM月DD日') }} -
								{{ (activity.info.endTime * 1000) | format_date('MM月DD日') }}
							</p>
						</div>
					</div>

					<!-- 期数 -->
					<p class="pool__index">第{{ activity.info.id }}期</p>

					<!-- 累计获得 -->
					<div class="pool__gold" v-if="activity.status">
						<img src="@/assets/2/images/red-package/pool-gold.png" />

						<div class="a">
							<span>本期累计获得金币</span>
							<span>{{ bwbt_userInfo.activityUserGold }}</span>
						</div>

						<div class="b">
							<template v-if="luckyBag.gold == -1 && luckyBag.list.length == 0">
								<span>您已领完本期所有奖励</span>
							</template>

							<template v-else>
								<template v-if="luckyBag.list.length > 0">
									<span>您有一个</span>
									<span class="v">福袋</span>
									<span>可领取</span>
								</template>

								<template v-else>
									<span>距额外奖励差</span>
									<span class="v">{{ luckyBag.gold }}</span>
									<span>金币</span>
								</template>

								<div class="lucky-bag" @click="getLuckyBag">
									<img src="@/assets/2/images/red-package/lucky-bag.png" />
									<span v-if="luckyBag.list.length > 0">可领取</span>
								</div>
							</template>
						</div>
					</div>
				</template>

				<!-- 通知 -->
				<div class="pool__tips">
					<img src="@/assets/2/images/red-package/pool-notice.png" />

					<div class="b">
						<van-swipe :autoplay="10000" vertical :show-indicators="false">
							<van-swipe-item v-for="(item, index) in notice.list" :key="index">{{ item.content }}</van-swipe-item>
						</van-swipe>
					</div>
				</div>
			</div>

			<!-- 签到 -->
			<div class="card sign-in">
				<div class="card__header">签到赚金币</div>
				<div class="card__container">
					<ul class="sign-in__list">
						<li v-for="(item, index) in signIn.list" :key="index">
							<div
								class="sign-in__item"
								:class="[{ 'is-finished': item.receiveStatus == 5, 'is-active': item.receiveStatus == 1 }]"
								@click="toSignIn(item)"
							>
								<!-- 进行中 -->
								<template v-if="item.receiveStatus == 1">
									<img src="@/assets/2/images/red-package/gold.png" alt="" />
									<button class="sign-in__btn">签到</button>
								</template>

								<!-- 已签到 -->
								<template v-else-if="item.receiveStatus == 5">
									<img src="@/assets/2/images/red-package/gold2.png" alt="" />
									<p>+{{ item.goldAmount }}</p>
								</template>

								<!-- 已结束 -->
								<template v-else-if="item.receiveStatus == 2">
									<img src="@/assets/2/images/red-package/gold.png" alt="" />
									<p>已结束</p>
								</template>

								<!-- 已抢完 -->
								<template v-else-if="item.receiveStatus == 4">
									<img src="@/assets/2/images/red-package/gold.png" alt="" />
									<p>已抢完</p>
								</template>

								<!-- 时间未到 -->
								<template v-else>
									<img src="@/assets/2/images/red-package/gold.png" alt="" />
									<p>+{{ item.goldAmount }}</p>
								</template>
							</div>

							<p class="sign-in__time">{{ item.startTime }}</p>
						</li>
					</ul>
				</div>
			</div>

			<!-- 兑礼品 -->
			<div class="card gift">
				<div class="card__header">
					<span>兑礼品</span>

					<div class="countdown">
						<span>刷新时间</span>
						<cl-countdown :layout="['hour', 'minute', 'second']" :splitor="[':', ':', '']" :datetime="endTime"></cl-countdown>
					</div>

					<router-link to="/red-package/exchange" class="more-btn">查看更多</router-link>
				</div>

				<div class="card__container">
					<ul class="gift__list">
						<li v-for="(item, index) in gift.list" :key="index" @click="toDetail(item)">
							<img class="cover" :src="item.pic" alt="" />
							<p class="title">{{ item.title }}</p>
							<p class="cost">{{ item.goldAmount || 0 }}金币+{{ (item.endPrice - item.tljMoney) | fixed(2) }}元</p>

							<template v-if="item.hasBuy">
								<div class="btn is-exchanged">已兑换</div>
							</template>

							<template v-else>
								<div class="btn">兑换</div>
							</template>
						</li>
					</ul>
				</div>
			</div>

			<!-- 任务 -->
			<div class="card task">
				<div class="card__header">
					任务赚金币
				</div>

				<div class="card__container">
					<div
						v-for="(item, index) in taskList"
						:key="index"
						class="task__item"
						:class="{
							'is-active': item.receiveStatus == 1
						}"
						@click="onTaskTap(item)"
					>
						<img class="task__icon" :src="item.iconUrl" />
						<span class="task__span">{{ item.name }}</span>
						<div class="task__gold">
							<img src="@/assets/2/images/red-package/gold.png" />
							<span>+{{ item.goldAmount }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 规则 -->
		<rules ref="rules" />

		<!-- 兑换现金红包 -->
		<gold-exchange ref="gold-exchange" />

		<!-- 金币记录 -->
		<gold-record ref="gold-record"></gold-record>

		<!-- 分享 -->
		<share ref="share" />

		<!-- 福袋 -->
		<lucky-bag-popup ref="lucky-bag"></lucky-bag-popup>

		<!-- 瓜分 -->
		<carve-up-popup ref="carve-up"></carve-up-popup>

		<!-- 新人金币 -->
		<!-- <gold-new-popup ref="gold-new" @done="onGoldNewDone"></gold-new-popup> -->
	</div>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import { Toast, Swipe, SwipeItem } from 'vant';
import store from 'store';
import _ from 'lodash';

import Rules from './components/rules';
import MyGold from './components/gold/my';
import GoldExchange from './components/gold/exchange';
import GoldRecord from './components/gold/record';
import Share from '../bwbt/components/share';
import LuckyBagPopup from './components/lucky-bag/popup';
import CarveUpPopup from './components/carve-up/popup';
// import GoldNewPopup from './components/gold/new';

import ClCountdown from '@/components/countdown';

export default {
	components: {
		Rules,
		MyGold,
		GoldExchange,
		GoldRecord,
		Share,
		ClCountdown,
		LuckyBagPopup,
		CarveUpPopup,
		// GoldNewPopup,
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem
	},

	data() {
		return {
			// 签到红包列表
			signIn: {
				list: []
			},
			// 礼品列表
			gift: {
				list: [],
				current: {},
				timer: null
			},
			// 通知栏
			notice: {
				list: []
			},
			// 活动信息
			activity: {
				info: null,
				status: false
			},
			// 福袋
			luckyBag: {
				gold: 0,
				list: []
			},
			loading: true,
			endTime: moment().format('YYYY-MM-DD 23:59:59')
		};
	},

	computed: {
		...mapGetters(['token', 'bwbt_userInfo', 'taskList'])
	},

	watch: {
		'bwbt_userInfo.activityUserGold': {
			immediate: true,
			handler(val) {
				console.log('>>> 更新活动、福袋信息');
				this.getLuckyBagList();
				this.getActivityInfo();
			}
		}
	},

	filters: {
		receive_status(i) {
			switch (i) {
				case 1:
					return '拆红包';
				case 2:
					return '已结束';
				case 3:
					return '未开始';
				case 4:
					return '已抢完';
				case 5:
					return '已领取';
			}
		}
	},

	activated() {
		const next = () => {
			Toast.loading({
				message: '加载中'
			});

			this.$store
				.dispatch('GET_BWBT_USERINFO')
				.then(() => {
					// 签到列表
					this.getSignInList();
					// 任务列表
					this.getTaskList();
					// 通知列表
					this.getNoticeList();
					// 礼品列表
					this.getGiftList();
					// 福袋列表
					this.getLuckyBagList();
					// 活动信息
					this.getActivityInfo().then(() => {
						Toast.clear();
					});
				})
				.catch(err => {
					console.error(err);
					Toast.clear();
					Toast(err.message);
				});
		};

		next();
	},

	methods: {
		// 签到列表
		getSignInList() {
			this.$service.bwbt.redPacket
				.list()
				.then(res => {
					this.signIn.list = res;
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		// 去签到
		toSignIn: _.debounce(function(item) {
			if (item.receiveStatus == 1) {
				this.$service.bwbt.bwbtGold
					.receive({
						sceneKey: item.sceneKey,
						scene: 1
					})
					.then(res => {
						item.receiveStatus = 5;
						// 更新
						this.$store.dispatch('GET_BWBT_USERINFO');
						Toast(`恭喜您获得${item.goldAmount}金币`);
					})
					.catch(err => {
						Toast(err.message);
						this.getSignInList();
					});
			}
		}, 300),

		// 礼品列表
		getGiftList() {
			return this.$service.bwbt.bwbtGold
				.getMdGoodsPage({ page: 1, size: 3 })
				.then(res => {
					console.log('礼品列表', res);
					return (this.gift.list = res.list);
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		// 任务列表
		getTaskList() {
			this.$store.dispatch('getTaskList');
		},

		// 公告列表
		getNoticeList() {
			this.$service.bwbt.bwbtGold
				.broadcastList()
				.then(res => {
					console.log('公告列表', res);
					this.notice.list = res;
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		// 获取活动信息
		getActivityInfo() {
			return this.$service.bwbt.bwbtActivity
				.activityInfo()
				.then(res => {
					console.log('活动信息', res);
					// 是否本期
					this.activity.status = !!res.currentActivity;
					this.activity.info = res.currentActivity && res.currentActivity.id ? res.currentActivity : res.activityForeshow;

					// 是否瓜分
					if (res.isReceiveActivityGold == 1 && res.receiveGoldActivityInfo) {
						this.$refs['carve-up'].open(res.receiveGoldActivityInfo);
					}
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		// 获取福袋列表
		getLuckyBagList() {
			return this.$service.bwbt.bwbtGold
				.luckyBagList()
				.then(res => {
					console.log('福袋列表', res);
					this.luckyBag.gold = res.distance;
					this.luckyBag.list = res.list;
				})
				.catch(err => {
					Toast(err.message);
				});
		},

		// 领取福袋
		getLuckyBag() {
			if (this.luckyBag.list.length > 0) {
				this.$refs['lucky-bag'].open(this.luckyBag.list[0]);
			} else {
				Toast(`努力再得${this.luckyBag.gold}金币就可以领取奖励啦`);
			}
		},

		// 新人领取回调
		onGoldNewDone() {
			// this.$root.$children[0].$refs['guide'].open(1, () => {
			// 	this.openGoldRecord('exchange');
			// });
		},

		// 分享
		onShare() {
			this.$refs['share'].open();
		},

		// 点击任务
		onTaskTap(item) {
			// 浏览类目
			if (item.type == 1) {
				this.$store
					.dispatch('isNewTask', item.sceneKey)
					.then(res => {
						if (res) {
							this.$store.commit('SET_SELECT', {
								key: 'taskCategory',
								value: item.floorId
							});
						}

						this.$router.push({
							path: '/',
							query: {
								category: item.floorId,
								sceneKey: item.sceneKey
							}
						});
					})
					.catch(err => {});
			}

			// 兑换礼物
			if (item.type == 4) {
				this.$router.push(`/red-package/exchange`);
			}

			// 分享
			if (item.type == 2) {
				this.onShare();
			}

			// 搜券
			if (item.type == 3) {
				this.$router.push(`/goods-search?sceneKey=${item.sceneKey}`);
			}
		},

		// 打开规则
		openRules() {
			this.$refs['rules'].open();
		},

		// 金币记录，兑换
		openGoldRecord(action) {
			if (action == 'record') {
				this.$refs['gold-record'].open();
			}

			if (action == 'exchange') {
				this.$refs['gold-exchange'].open();
			}
		},

		// 兑礼品
		toGiftList() {
			this.$router.push({
				path: '/red-package/exchange'
			});
		},

		// 详情
		toDetail(item) {
			this.$store.commit('SET_SELECT', { key: 'giftInfo', value: item, save: true });

			this.$router.push({
				path: '/red-package/exchange-detail'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.red-package {
	position: relative;
	padding-bottom: 200px;

	&__bg {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	&__header {
		position: relative;
		font-size: 26px;
		padding: 30px;
		letter-spacing: 2px;
		height: 260px;

		.label {
			font-size: 28px;
			color: #fff;
			margin-top: 38px;
			margin-bottom: 6px;

			p {
				display: inline-block;
			}
		}

		.gold {
			p {
				color: #fff;
				display: inline-block;
			}

			&-num {
				font-size: 80px;
				font-weight: bold;
				text-shadow: 6px 8px 10px #ee6a00;
			}

			&-record {
				font-size: 28px;
				margin-left: 20px;
			}
		}

		ul {
			display: flex;
			align-items: center;
			position: absolute;
			right: 20px;
			top: 86px;

			li {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				img {
					display: block;
					height: 72px;
					width: 72px;
					margin: 0 30px;
				}

				p {
					margin-top: 10px;
					color: #fff;
				}
			}
		}
	}

	&__container {
		position: relative;
	}

	.pool {
		background: #fff;
		margin: 20px;
		margin-bottom: 30px;
		padding: 1px 0;
		border-radius: 20px;
		font-size: 26px;
		position: relative;

		&__top-border {
			position: absolute;
			top: -25px;
		}

		&__header {
			display: flex;
			align-items: center;
			padding: 20px 0 0 40px;
		}

		&__gold {
			height: 290px;
			position: relative;
			margin: 10px 30px 20px 30px;

			.a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				position: absolute;
				right: 0;
				top: 48px;
				height: 90px;
				width: 100%;
				padding: 0 50px;

				span {
					&:first-child {
						font-size: 30px;
						letter-spacing: 2px;
					}

					&:last-child {
						font-size: 64px;
					}
				}
			}

			.b {
				display: flex;
				align-items: center;
				position: absolute;
				right: 0;
				bottom: 20px;
				height: 90px;
				width: 100%;
				padding: 0 50px;

				.v {
					font-size: 40px;
					color: #ff6704;
					margin: 0 20px;
				}

				.lucky-bag {
					position: absolute;
					top: 6px;
					right: 86px;

					img {
						height: 84px;
						width: 74px;
					}

					span {
						position: absolute;
						top: -20px;
						right: -70px;
						background-color: #ff3439;
						color: #fff;
						display: inline-block;
						width: 94px;
						text-align: center;
						font-size: 24px;
						border-radius: 20px 20px 20px 0;
						transform: scale(0.9);
					}
				}
			}
		}

		&__label {
			font-size: 30px;
			font-weight: bold;
			letter-spacing: 2px;
		}

		&__det {
			margin-left: 30px;

			p {
				position: relative;
				top: -6px;

				&:first-child {
					color: #ff5a00;
					font-size: 54px;
					font-weight: bold;

					&::after {
						content: '金币';
						font-size: 30px;
						color: #000;
						font-weight: 200;
						position: relative;
						top: -4px;
						left: 10px;
					}
				}

				&:last-child {
					position: relative;
					top: -14px;
				}
			}
		}

		&__index {
			position: absolute;
			right: 0;
			top: -5px;
			background-image: linear-gradient(to bottom, #fcffb1 2%, #ffd31c);
			padding: 10px 40px;
			border-radius: 0 20px 0 40px;
		}

		&__tips {
			display: flex;
			align-items: center;
			margin: 20px 60px;

			img {
				height: 36px;
				width: 36px;
			}

			.b {
				flex: 1;
				height: 40px;
				margin-left: 20px;

				.van-swipe {
					height: 40px;

					&-item {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #575757;
					}
				}
			}
		}
	}

	.card {
		background-color: #fff;
		margin: 20px;
		border-radius: 20px;

		&__header {
			display: flex;
			align-items: center;
			height: 90px;
			padding: 0 30px;
			font-size: 30px;
			position: relative;
			font-weight: bold;

			.more-btn {
				font-size: 26px;
				color: #959595;
				position: absolute;
				right: 20px;
			}
		}

		&__container {
			padding: 10px 30px 30px 30px;
		}
	}

	.sign-in {
		&__list {
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
			padding: 10px;
			margin: 0 -10px;

			&::-webkit-scrollbar {
				display: none;
			}

			li {
				padding: 0 10px;
			}
		}

		&__item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #f7f7f7;
			border-radius: 10px;
			height: 132px;
			width: 112px;

			img {
				display: block;
				height: 70px;
				width: 70px;
			}

			p {
				font-size: 26px;
				color: #9f9f9f;
				position: relative;
				top: -4px;
				left: -2px;
			}

			.sign-in__btn {
				border: 0;
				border-radius: 40px;
				padding: 0 20px;
				background-color: #ffbf00;
				color: #fff;
				font-size: 24px;
			}

			&.is-finished {
				background-color: #ffbf00;

				p {
					color: #fff;
				}
			}

			&.is-active {
				box-shadow: 0 0 10px 2px #ffbf00;
				background-color: #fff;
			}
		}

		&__time {
			font-size: 26px;
			text-align: center;
			margin-top: 10px;
		}
	}

	.gift {
		.card__container {
			padding: 0 0 30px 0;
		}

		.countdown {
			display: flex;
			align-items: center;
			font-size: 24px;
			margin-left: 20px;
			border: 2px solid #ff5d00;
			color: #ff5d00;
			border-radius: 46px;
			height: 46px;

			& > span {
				display: block;
				height: 46px;
				line-height: 46px;
				padding: 0 10px;
				background-color: #ff5d00;
				color: #fff;
				border-radius: 46px 0 0 46px;
			}

			/deep/.cl-countdown {
				&__number {
					font-size: 24px;
					padding: 0;
					margin: 0;
					width: 36px;
					background-color: transparent;
				}
			}
		}

		&__list {
			display: flex;
			overflow: hidden;

			li {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 10px;
				width: 33.33%;
				box-sizing: border-box;

				.cover {
					display: block;
					height: 180px;
					width: 180px;
					background-color: #eee;
					margin-bottom: 6px;
				}

				.title {
					font-size: 28px;
					font-weight: bold;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}

				.cost {
					font-size: 24px;
					color: #ff462c;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.btn {
					background-image: linear-gradient(to right, #ff8900, #ff313a);
					height: 52px;
					line-height: normal;
					padding: 0 40px;
					border-radius: 100px;
					border: 0;
					font-size: 28px;
					color: #fff;
					letter-spacing: 2px;
					margin-top: 10px;
					display: flex;
					align-items: center;

					&.is-exchanged {
						background-image: linear-gradient(to right, #ddd, #c1c1c1);
					}
				}
			}
		}
	}

	.task {
		&__item {
			display: flex;
			align-items: center;
			font-size: 24px;
			padding: 24px 0;
			border-bottom: 1px solid #eee;

			&.is-active {
				.task__gold {
					background-color: #c3c3c3;
					background-image: none;
				}
			}
		}

		&__icon {
			display: block;
			height: 72px;
			width: 72px;
		}

		&__span {
			flex: 1;
			margin: 0 20px;
			font-size: 28px;
			font-weight: 500;
		}

		&__gold {
			display: flex;
			align-items: center;
			border-radius: 50px;
			padding: 4px 20px 4px 8px;
			color: #fff;
			background-image: linear-gradient(to right, #ff8900, #ff313a);

			img {
				height: 50px;
				width: 50px;
				position: relative;
				top: 2px;
			}
		}
	}
}
</style>
